<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { Table, TableColumn } from '@/components/Table'
import { watch, inject, reactive, Ref } from 'vue'
import { Row } from '@/api/franchiser'
import { ElImage } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
const emit = defineEmits(['close', 'get-list'])
const currentRow: Ref<Row> = inject('currentRow') as Ref<Row>
const tableColumns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'img',
    label: '商品图片',
    slots: {
      default: ({ row }) => {
        return (
          <ElImage
            src={row.img}
            style="width: 40px;height:40px;"
            onClick={() => createImageViewer({ urlList: [row.img] })}
          />
        )
      }
    }
  },
  {
    field: 'goods_name.no',
    label: '商品编码'
  },
  {
    field: 'goods_name.name',
    label: '商品名称'
  },
  {
    field: 'goods_no.spec_name',
    label: '商品规格'
  },
  {
    field: 'quantity',
    label: '数量'
  },
  {
    field: 'money',
    label: '单价'
  },
  {
    field: 'amount',
    label: '累计金额'
  }
])

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'name',
    label: '客户名称'
  },
  {
    field: 'real_name',
    label: '联系人'
  },
  {
    field: 'mobile',
    label: '联系方式'
  },
  {
    field: 'address',
    label: '收货地址'
  },
  {
    field: 'remark',
    label: '订单备注'
  }
])
watch(
  () => currentRow.value,
  (currentRow) => {
    if (!currentRow) return
    console.log(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <ContentDetailWrap title="订单详情">
    <div>
      <Table
        v-model:pageSize="pageSize"
        v-model:currentPage="currentPage"
        :columns="tableColumns"
        :data="currentRow.orderDetail"
        :loading="loading"
        @register="tableRegister"
      />
    </div>
    <div style="margin-top: 40px">
      <div style="display: inline-block; margin-right: 40px">应付金额: {{ currentRow.amount }}</div>
      <div style="display: inline-block">总数: {{ currentRow.quantity }}</div>
    </div>
    <div style="margin-top: 40px">
      <Descriptions message="message" :data="currentRow.user" :schema="schema" />
    </div>
    <template #footer>
      <div class="w-full flex items-center justify-center">
        <BaseButton type="primary" @click="emit('close')">返回</BaseButton>
      </div>
    </template>
  </ContentDetailWrap>
</template>
